<template>
    <div class="page-swipe ">
        <mt-swipe :auto="4000" :show-indicators="true">
            <mt-swipe-item class="item swip-item-1">1</mt-swipe-item>
            <mt-swipe-item class="item swip-item-2">2</mt-swipe-item>
            <mt-swipe-item class="item swip-item-3">3</mt-swipe-item>
        </mt-swipe>
    </div>
</template>
<style>
    .page-swipe .mint-swipe{
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
    }
    .page-swipe .mint-swipe .item{
        line-height: 200px;
    }
    .swip-item-1{
        background: red;
    }
    .swip-item-2{
        background: blue;
    }
    .swip-item-3{
        background: green;
    }
    .item{
        text-align: center;
        font-size: 40px;
        color: white;
    }
    .button-wrapper{
        display: flex;
        height: 100px;
    }
    .flex-item{
        flex: 1;
        display: inline-block;
        text-align: center;
        height: 100%;
        line-height: 100%;
        font-size: 40px;
    }
    .prev-button{
        background: darkorange;
    }
    .next-button{
        background: green;
    }
</style>
